//全局变量
var fullScreenFlag = false,
    volumeFlag = false;
//获取dom
var vid = document.getElementById("video"),
    btn = document.getElementById("btn"),
    rePlay = document.getElementById("rePlay"),
    allTime = document.getElementById("allTime"),
    playTime = document.getElementById("playTime"),
    bar = document.getElementById("bar"),
    barbox = document.getElementById("bar-box"),
    volumeBar = document.getElementById("volumeBar"),
    volumeBarbox = document.getElementById("volumeBar-box"),
    volumeBarbox2 = document.getElementById("volumeBar-box2"),
    volume = document.getElementById("volume");
//播放暂停
btn.addEventListener("click", () => {
    if (btn.name == "播放") {
        myplay();
    } else {
        mypause();
    }
});

//重新播放
rePlay.addEventListener("click", () => {
    vid.currentTime = 0;
    rePlay.style.display = "none";
    myplay();
    rePlay.style.background = `url('./img/rePlay.png') no-repeat center`;
});
//双击全屏
vid.addEventListener("dblclick", () => {
    myplay();
    if (fullScreenFlag) {
        video.webkitCancelFullScreen();
        fullScreenFlag = true;
    } else {
        video.webkitRequestFullscreen();
        fullScreenFlag = false;
    }
});
//时间戳转换
function s_to_hs(s) {
    //计算分钟
    //算法：将秒数除以60，然后下舍入，既得到分钟数
    var h;
    h = Math.floor(s / 60);
    //计算秒
    //算法：取得秒%60的余数，既得到秒数
    s = s % 60;
    //将变量转换为字符串
    h += "";
    s += "";
    //如果只有一位数，前面增加一个0
    h = h.length == 1 ? "0" + h : h;
    s = s.length == 1 ? "0" + s : s;
    return h + ":" + s;
}
// 单击
vid.addEventListener("click", () => {
    if (btn.name == "播放") {
        myplay();
    } else {
        mypause();
    }
});
// 播放
function myplay() {
    vid.play();
    btn.name = "暂停";
    rePlay.style.display = "none";
    allTime.innerHTML = s_to_hs(Math.ceil(vid.duration));
    btn.style.background = `url('./img/play.png') no-repeat center`;
}
//暂停
function mypause() {
    vid.pause();
    btn.name = "播放";
    btn.style.background = `url('./img/pause.png') no-repeat center`;
}
//监听结束
vid.addEventListener("ended", function() {
    mypause();
    rePlay.style.display = "block";
});
//播放监听
vid.addEventListener("timeupdate", () => {
    playTime.innerHTML = s_to_hs(Math.ceil(vid.currentTime));
    var num = Math.ceil(vid.currentTime) / Math.ceil(vid.duration);
    bar.style.width = toPercent(num);
});
//小数转%
function toPercent(point) {
    var str = Number(point * 100).toFixed(1);
    str += "%";
    return str;
}
// 点击进度条
bar.addEventListener("click", (e) => {
    // 这里事件对象一定要再传一次
    assign(e);
});
//拖动时进度条宽度跟随鼠标一起变化
barbox.addEventListener("mousedown", (e) => {
    var event = e;
    barbox.addEventListener("mousemove", callBack);
});
//事件监听事件不然移除不了
function callBack() {
    assign(event);
}
//移除事件
barbox.addEventListener("mouseup", (e) => {
    //使用局部变量接收参数不然回调函数取不到
    var event = e;
    barbox.removeEventListener("mousemove", callBack);
});
// 点击进度条
barbox.addEventListener("click", (e) => {
    assign(e);
});
//鼠标指定播放进度
function assign(e) {
    var clickWidth = e.offsetX;
    //这里宽度根据bar-box定的
    var num = clickWidth / 250;
    rePlay.style.display = "none";
    bar.style.width = toPercent(num);
    vid.currentTime = Math.ceil(vid.duration) * num;
}
//声音控制
volume.addEventListener("click", () => {
    if (volumeFlag) {
        volumeBar.style.height = 0 + "px";
        volumeFlag = false;
    } else {
        volumeBar.style.height = 100 + "px";
        volumeFlag = true;
    }
});
//点击声音进度条
volumeBar.addEventListener("click", (e) => {
    vol(e)
});
//拖动音量
volumeBar.addEventListener("mousedown", (e) => {
    var event = e;
    volumeBar.addEventListener("mousemove", volCall);
});
volumeBar.addEventListener("mouseup", (e) => {
    var event = e;
    volumeBar.removeEventListener("mousemove", volCall);
});
//这里要在拖动时鼠标移动到视频其他处时去除事件
vid.addEventListener('mousemove', (e) => {
    var event = e;
    volumeBar.removeEventListener("mousemove", volCall);
    barbox.removeEventListener("mousemove", callBack);
})

function volCall() {
    vol(event)
}

function vol(e) {
    var clickHeight = e.offsetY / 100;
    volumeBarbox.style.height = toPercent(clickHeight);
    vid.volume = 1 - clickHeight;
}